<template>
  <div>
    <van-nav-bar title="编辑资料" left-arrow left-text @click-left="onClickLeft" />
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
            <van-uploader :after-read="afterRead">
                <van-image :src="ProfileObj.photo" round  class="avatar"/>
            </van-uploader>
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="ProfileObj.name" @click="nameClick"/>
      <van-cell title="生日" is-link :value="ProfileObj.birthday" @click='birthdayClick'/>
    </van-cell-group>
    <!-- 姓名修改弹窗 -->
      <van-dialog
        v-model="show"
        title="修改名称"
        show-cancel-button
        :beforeClose="beforeCloseFn"
        >
        <input type="text" v-fofo v-model="inputUserName" />
      </van-dialog>
      <!-- 时间选择器 -->
      <van-popup v-model="dateTimePickerShow" position="bottom" :style="{ height: '50%' }"  round>
        <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel='dateCancelFn'
        @confirm="confirmFn"
      />
      </van-popup>
  </div>
</template>

<script>
import { Notify } from 'vant'
import { userProfileAPI, updateUserPhotoAPI, updateUserProfileAPI } from '@/api'
import moment from 'moment'
export default {
  name: 'UserEdit',
  data () {
    return {
      ProfileObj: {}, // 用户基本资料
      show: false, // 控制姓名修改输入框出现/隐藏
      inputUserName: '', // 修改名字-弹出框输入框绑定值
      gender: 0,
      birthday: '',
      intro: '',
      minDate: new Date(1920, 0, 1), // 最小范围
      maxDate: new Date(), // 最大范围 (默认获取系统日期-今日) new Date()对象的格式Thu Dec 20 1990 00:00:00 GMT+0800 (中国标准时间)
      currentDate: new Date(), // 当前选择的时间
      dateTimePickerShow: false // 日期选择器-弹出层显示/隐藏
    }
  },
  created () {
    this.getProfile()
  },
  methods: {
    // 点击左侧返回按钮
    onClickLeft () {
      this.$router.back()
    },
    // 获取个人资料
    async getProfile () {
      const res = await userProfileAPI()
      this.ProfileObj = res.data.data
    },
    // 图片上传(之前做后台管理系统的时候,上传图片只需要imgurl和imgname)这里需要的是一个FormData对象
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      const theFd = new FormData() // 创建FormData对象
      theFd.append('photo', file.file)// 请求体里加入一对参数名和值 通过append(key, value)来添加数据
      const res = await updateUserPhotoAPI(theFd)
      this.ProfileObj.photo = res.data.data.photo
    },
    // 姓名 点击事件
    nameClick () {
      this.show = true
      this.inputUserName = this.ProfileObj.name
    },
    // 姓名 - 确认框 - 关闭前回调函数
    async beforeCloseFn (action, done) {
      if (action === 'confirm') {
        // 点确定
        const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,7}$/
        if (reg.test(this.inputUserName) === true) {
          // text是正则调用的一个方法 reg是正则，所以只有reg才可以调用text。他返回的是一个布尔值
          // text 里面放的是需要验证的字符串 this.inputUserName就是需要验证的字符串
          // 通过了校验
          await updateUserProfileAPI({
            name: this.inputUserName
          })
          this.ProfileObj.name = this.inputUserName
          // 更新成功 - 回显到页面上
          done()
        } else {
          // 没通过校验, 给用户提示
          Notify({ type: 'warning', message: '用户名只能是1-7位中英数字组合' })
          done(false)
        }
      } else {
        // 点取消
        done() // 让弹窗关闭
      }
    },
    // 生日 点击事件
    birthdayClick () {
      this.dateTimePickerShow = true
      // 数据和页面显示 -> 年-月-日 格式的字符串
      // datetimePicker组件 -> 日期对象
      this.currentDate = new Date(this.ProfileObj.birthday) // 组件显示默认生日
    },
    // 日期选择器 - 取消事件
    dateCancelFn () {
      this.dateTimePickerShow = false
    },
    // 日期选择器- 完成确认时间
    async confirmFn (value) {
      // new Date()对象的格式Thu Dec 20 1990 00:00:00 GMT+0800 (中国标准时间)
      // 日期选择器组件里currentDate是日期对象, 而后端要的是年-月-日字符串
      this.birthday = moment(value).format('YYYY-MM-DD')// 百度关键词 格式化日期
      await updateUserProfileAPI({
        birthday: this.birthday
      })
      this.ProfileObj.birthday = this.birthday
      this.dateTimePickerShow = false
    }

  }
}
</script>

<style lang="less" scoped>
.avatar{
    height: 50px;
    width: 50px;
}
/deep/.van-dialog__content{
    text-align: center;
    input{
        padding: 0;
        border: none;
        outline: none;
        text-align: center
    }
}
</style>
